<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spring AI Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .content {
            padding: 30px;
        }

        .demo-section {
            margin-bottom: 40px;
            padding: 25px;
            border: 2px solid #f0f0f0;
            border-radius: 10px;
            background: #fafafa;
        }

        .demo-section h3 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.5em;
            border-bottom: 2px solid #4facfe;
            padding-bottom: 10px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }

        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #4facfe;
        }

        textarea {
            resize: vertical;
            min-height: 100px;
        }

        button {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
        }

        button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .result {
            margin-top: 20px;
            padding: 20px;
            border-radius: 8px;
            background: white;
            border-left: 4px solid #4facfe;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .result h4 {
            color: #333;
            margin-bottom: 10px;
        }

        .result-content {
            white-space: pre-wrap;
            line-height: 1.6;
            color: #666;
        }

        .loading {
            display: none;
            text-align: center;
            color: #4facfe;
            font-weight: 600;
        }

        .error {
            color: #e74c3c;
            background: #fdf2f2;
            border-left-color: #e74c3c;
        }

        .success {
            color: #27ae60;
            background: #f2fdf5;
            border-left-color: #27ae60;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 30px;
        }

        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
            }
            
            .container {
                margin: 10px;
            }
            
            .header {
                padding: 20px;
            }
            
            .content {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 Spring AI Demo</h1>
            <p>体验强大的AI功能 - 聊天、代码生成、文本摘要</p>
        </div>
        
        <div class="content">
            <div class="grid">
                <!-- 简单聊天 -->
                <div class="demo-section">
                    <h3>💬 简单聊天</h3>
                    <div class="form-group">
                        <label for="chatQuery">输入您的问题：</label>
                        <textarea id="chatQuery" placeholder="例如：请介绍一下Spring框架的优势"></textarea>
                    </div>
                    <button onclick="simpleChat()">发送消息</button>
                    <div class="loading" id="chatLoading">正在思考中...</div>
                    <div class="result" id="chatResult" style="display: none;"></div>
                </div>

                <!-- 模板聊天 -->
                <div class="demo-section">
                    <h3>📝 模板聊天</h3>
                    <div class="form-group">
                        <label for="topic">话题：</label>
                        <input type="text" id="topic" placeholder="例如：人工智能">
                    </div>
                    <div class="form-group">
                        <label for="style">风格：</label>
                        <select id="style">
                            <option value="专业">专业</option>
                            <option value="幽默">幽默</option>
                            <option value="简洁">简洁</option>
                            <option value="详细">详细</option>
                            <option value="通俗易懂">通俗易懂</option>
                        </select>
                    </div>
                    <button onclick="templateChat()">生成内容</button>
                    <div class="loading" id="templateLoading">正在生成中...</div>
                    <div class="result" id="templateResult" style="display: none;"></div>
                </div>

                <!-- 代码生成 -->
                <div class="demo-section">
                    <h3>💻 代码生成</h3>
                    <div class="form-group">
                        <label for="language">编程语言：</label>
                        <select id="language">
                            <option value="Java">Java</option>
                            <option value="Python">Python</option>
                            <option value="JavaScript">JavaScript</option>
                            <option value="C++">C++</option>
                            <option value="Go">Go</option>
                            <option value="Rust">Rust</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="description">功能描述：</label>
                        <textarea id="description" placeholder="例如：实现一个快速排序算法"></textarea>
                    </div>
                    <button onclick="generateCode()">生成代码</button>
                    <div class="loading" id="codeLoading">正在生成代码...</div>
                    <div class="result" id="codeResult" style="display: none;"></div>
                </div>

                <!-- 文本摘要 -->
                <div class="demo-section">
                    <h3>📄 文本摘要</h3>
                    <div class="form-group">
                        <label for="textToSummarize">输入文本：</label>
                        <textarea id="textToSummarize" placeholder="粘贴需要摘要的长文本..." style="min-height: 120px;"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="maxLength">摘要长度（字数）：</label>
                        <input type="number" id="maxLength" value="200" min="50" max="500">
                    </div>
                    <button onclick="summarizeText()">生成摘要</button>
                    <div class="loading" id="summaryLoading">正在生成摘要...</div>
                    <div class="result" id="summaryResult" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const API_BASE = '/api/spring-ai';

        function showLoading(loadingId) {
            document.getElementById(loadingId).style.display = 'block';
        }

        function hideLoading(loadingId) {
            document.getElementById(loadingId).style.display = 'none';
        }

        function showResult(resultId, content, isError = false) {
            const resultDiv = document.getElementById(resultId);
            resultDiv.style.display = 'block';
            resultDiv.className = isError ? 'result error' : 'result success';
            resultDiv.innerHTML = `
                <h4>${isError ? '❌ 错误' : '✅ 结果'}</h4>
                <div class="result-content">${content}</div>
            `;
        }

        async function simpleChat() {
            const query = document.getElementById('chatQuery').value.trim();
            if (!query) {
                alert('请输入问题');
                return;
            }

            showLoading('chatLoading');
            try {
                const response = await fetch(`${API_BASE}/chat?query=${encodeURIComponent(query)}`);
                const data = await response.json();
                
                if (data.success) {
                    showResult('chatResult', data.data);
                } else {
                    showResult('chatResult', data.message, true);
                }
            } catch (error) {
                showResult('chatResult', '网络错误：' + error.message, true);
            } finally {
                hideLoading('chatLoading');
            }
        }

        async function templateChat() {
            const topic = document.getElementById('topic').value.trim();
            const style = document.getElementById('style').value;
            
            if (!topic) {
                alert('请输入话题');
                return;
            }

            showLoading('templateLoading');
            try {
                const response = await fetch(`${API_BASE}/chat/template`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ topic, style })
                });
                const data = await response.json();
                
                if (data.success) {
                    showResult('templateResult', data.data);
                } else {
                    showResult('templateResult', data.message, true);
                }
            } catch (error) {
                showResult('templateResult', '网络错误：' + error.message, true);
            } finally {
                hideLoading('templateLoading');
            }
        }

        async function generateCode() {
            const language = document.getElementById('language').value;
            const description = document.getElementById('description').value.trim();
            
            if (!description) {
                alert('请输入功能描述');
                return;
            }

            showLoading('codeLoading');
            try {
                const response = await fetch(`${API_BASE}/generate-code`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ language, description })
                });
                const data = await response.json();
                
                if (data.success) {
                    showResult('codeResult', data.data);
                } else {
                    showResult('codeResult', data.message, true);
                }
            } catch (error) {
                showResult('codeResult', '网络错误：' + error.message, true);
            } finally {
                hideLoading('codeLoading');
            }
        }

        async function summarizeText() {
            const text = document.getElementById('textToSummarize').value.trim();
            const maxLength = parseInt(document.getElementById('maxLength').value);
            
            if (!text) {
                alert('请输入需要摘要的文本');
                return;
            }

            showLoading('summaryLoading');
            try {
                const response = await fetch(`${API_BASE}/summarize`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ text, maxLength })
                });
                const data = await response.json();
                
                if (data.success) {
                    showResult('summaryResult', data.data);
                } else {
                    showResult('summaryResult', data.message, true);
                }
            } catch (error) {
                showResult('summaryResult', '网络错误：' + error.message, true);
            } finally {
                hideLoading('summaryLoading');
            }
        }

        // 页面加载时检查服务状态
        window.onload = async function() {
            try {
                const response = await fetch(`${API_BASE}/health`);
                const data = await response.json();
                if (data.success) {
                    console.log('✅ Spring AI服务运行正常');
                }
            } catch (error) {
                console.error('❌ Spring AI服务连接失败:', error);
            }
        };
    </script>
</body>
</html>